<template>
  <div>
    <div class="text-lg font-semibold m-1">异常血压记录</div>
    <el-row class="ml10">
      <el-form :inline="true" :model="state.queryForm" @keyup.enter="getDataList" ref="queryRef">
        <el-form-item label="日期" prop="queryDate">
          <el-date-picker type="date" placeholder="选择日期" style="max-width: 180px" value-format="YYYY-MM-DD" v-model="state.queryForm.queryDate" />
        </el-form-item>
        <el-form-item label="风险评估" prop="riskAssessment">
          <el-select v-model="state.queryForm.riskAssessment" placeholder="请选择">
            <el-option label="重度" value="重度" />
            <el-option label="中度" value="中度" />
            <el-option label="轻度" value="轻度" />
            <el-option label="偏低" value="偏低" />
            <el-option label="正常高值" value="正常高值" />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button @click="getDataList" icon="search" type="primary">查询</el-button>
        </el-form-item>
        <el-form-item>
          <el-button @click="resetQuery" icon="Refresh">{{ $t('common.resetBtn') }}</el-button>
        </el-form-item>
      </el-form>
    </el-row>

    <el-table :data="state.dataList" v-loading="state.loading" border :cell-style="tableStyle.cellStyle"
      :header-cell-style="tableStyle.headerCellStyle" height="250" @selection-change="selectionChangHandle"
      @sort-change="sortChangeHandle">
      <el-table-column type="selection" width="40" align="center" show-overflow-tooltip />
      <el-table-column prop="uploadTime" label="时间" show-overflow-tooltip></el-table-column>
      <el-table-column prop="systolic" label="高压(mmHg)" show-overflow-tooltip></el-table-column>
      <el-table-column prop="diastolic" label="低压(mmHg)" show-overflow-tooltip></el-table-column> <el-table-column
        prop="heartRate" label="心率（次/分钟）" show-overflow-tooltip></el-table-column>
      <el-table-column prop="riskAssessment" label="风险评估">
        <template v-slot="scope">
          <span :class="{ red: scope.row.riskAssessment === '重度' , yellow: scope.row.riskAssessment === '中度', blue: scope.row.riskAssessment === '轻度',grey: scope.row.riskAssessment === '偏低' ,black: scope.row.riskAssessment === '正常高值' }">{{ scope.row.riskAssessment }}</span>
        </template>
      </el-table-column>
    </el-table>
    <pagination @size-change="sizeChangeHandle" @current-change="currentChangeHandle" v-bind="state.pagination" />
  </div>
</template>



<script setup lang="ts">
import { BasicTableProps, useTable } from "/@/hooks/table";
import { ref, reactive } from 'vue';
import { getAbnormalBloodInfo } from "/@/api/patient/patientBase";

const props = defineProps<{
  patientUid: string
}>()

// 搜索变量
const queryRef = ref()
// 多选变量
const selectObjs = ref([]) as any
const multiple = ref(true)

const state: BasicTableProps = reactive<BasicTableProps>({
  queryForm: {},
  pageList: getAbnormalBloodInfo
})

// 设置预置搜索条件
state.queryForm.patientUid = props.patientUid || null

//  table hook
const {
  getDataList,
  currentChangeHandle,
  sizeChangeHandle,
  sortChangeHandle,
  downBlobFile,
  tableStyle
} = useTable(state)

// 多选事件
const selectionChangHandle = (objs: { patientUid: string }[]) => {
  selectObjs.value = objs.map(({ patientUid }) => patientUid);
  multiple.value = !objs.length;
};

// 清空搜索条件
const resetQuery = () => {
  // 清空搜索条件
  queryRef.value?.resetFields()
  // 清空多选
  selectObjs.value = []
  getDataList()
}

</script>

<style scoped>
.red {
  color: red;
}

.grey {
  color: grey;
}

.blue {
  color: blue;
}

.yellow {
  color: rgb(193, 177, 35);
}

.black {
  color: black;
}

</style>